<template>
  <div>
    <div class="top">
      <span class="top-title">请选择需要导入的文件，并开始导入</span>
      <span class="tip-text">上传规则说明
        <Poptip placement='bottom' title="规则说明">
          <img class="tips-icon" src="@/assets/icons/tishi.png" alt="">
          <div  style="width:300px;white-space:normal;" slot="content">
            <p>1.学生姓名、老师姓名、<span style="color:rgba(213,130,66,1);">学生备注名（非必填）、老师备注名（非必填）</span>、班级分类名称、班级名称、教室名称均最多输入10个字符</p>
            <p>2.手机号码默认只能输入11位数字</p>
            <p>3.性别默认选择：男/女</p>
            <p style="color:rgba(213,130,66,1);">4.生日默认填写：年 月 日（非必填）</p>
            <p>5.学生类型选择：试课学生/正式学生</p>
            <p>6.老师身份选择：老师/管理员/管理员+老师</p>
            <p>7.费用展示：默认保留小数点后两位</p>
            <p>8.人数、课时数默认只能填写大于等于0的整数</p>
            <p>9.老师地址：省市区（重庆市-重庆市-渝北区）</p>
            <p style="color:rgba(213,130,66,1);">10.教室地址：最多输入30个字（非必填）</p>
            <p style="color:rgba(213,130,66,1);">11.备注字段：暂时不作为上传字段</p>
            <p style="color:rgba(213,130,66,1);margin-top:10px;">注：以上“非必填”项字段已标注，其余均是必填项</p>
          </div>
        </Poptip>
      </span>
    </div>
    <div>
      <Upload
        ref='upload'
        :max-size='2048'
        accept='.xls,.xlsx'
        name='file'
        :show-upload-list='false'
        :headers="headers"
        :on-success='handleUploadSuccess'
        :on-error='handleUploadError'
        :before-upload="handleUpload"
        :action="action_url">
        <Button type="default">选择文件</Button>
      </Upload>
      <p style="margin-top:10px;" v-if="!!file">文件:<span v-text="file.name"></span></p>
      <p style="margin-top:10px;">上传文件不能超过2M，仅支持.xls以及.xlsx格式文件</p>
    </div>
    <div class="item">
      <div class="item-left">
        <Button @click="upload" :loading="loadingStatus" type="success">上传数据</Button>
      </div>
      <div @click="downloadTemplate" class="item-right">
        <img class="tips-icon" src="@/assets/icons/xiazai.png" alt="">下载模板
      </div>
    </div>
  </div>
</template>
<style scoped>
.top{
  display: flex;
  height: 21px;
  align-items: flex-end;
  margin: 30px 0px;
}
.top-title{
  font-size: 19px;
  color:black;
  margin-right: 15px;
}
.tip-text{
  line-height: 21px;
  height: 21px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.tips-icon{
  width: 14px;
  height: 14px;
}
.item{
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.item-left,.item-right{
  display: flex;
  width: 50%;
  align-items: center;
}
.item-right{
  cursor: pointer;
  width: 30%;
  justify-content: flex-end;
}
</style>
<script>
import { getDomain } from '@/local_config.js'
import { getToken } from '@/libs/util'
export default {
  name: 'step-one',
  data () {
    return {
      file: null,
      loadingStatus: false
    }
  },
  methods: {
    downloadTemplate () {
      window.open('/public/学校数据导入模板.xlsx')
    },
    upload () {
      if (!this.file) {
        return false
      }
      this.loadingStatus = true
      this.$refs.upload.post(this.file)
    },
    handleUpload (file) {
      this.file = file
      return false
    },
    handleUploadSuccess (res) {
      const { data } = res
      this.$Message.success('上传成功!')
      this.$emit('upload-success', data.name)
      this.file = null
      this.loadingStatus = false
    },
    handleUploadError () {
      this.$Message.error('上传失败!')
      this.loadingStatus = false
    }
  },
  computed: {
    headers () {
      const token = getToken()
      return {
        Authorization: `Bearer ${token}`
      }
    },
    action_url () {
      const domain = getDomain()
      return `${domain}upload`
    }
  }
}
</script>
